<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>

<body>
输入消杯坎点坑逝，将把消杯坑逝给所有客户端。方便测试用。<br/>
<input id="text" type="text" /><br/>
<button onclick="subscribe('SENSO@790908524661047296')">订阅测试频靓</button><button onclick="unsubscribe('SENSO@790908524661047296')">退订测试频靓</button><br/>
<button onclick="subscribe('WATER_AMOUNT')">订阅水佝频靓</button><button onclick="unsubscribe('WATER_AMOUNT')">退订水佝频靓</button><br/>
<button onclick="subscribe('WATER_QUALITY')">订阅水质频靓</button><button onclick="unsubscribe('WATER_QUALITY')">退订水质频靓</button><br/>
<button onclick="subscribe('TUBE_NET')">订阅网管频靓</button><button onclick="unsubscribe('TUBE_NET')">退订网管频靓</button><br/>
<button onclick="subscribes('SENSO@2')">订阅设备频靓</button><button onclick="unsubscribe('SENSO')">退订设备频靓</button><br/>
<button onclick="subscribes('SENSOR_REPORT@1')">订阅传感器通信频靓</button><button onclick="unsubscribe('SENSOR_REPORT')">退订传感器通信频靓</button><br/>
<button onclick="send('TEST')">坑逝消杯到测试频靓</button><br/>
<button onclick="send('WATER_AMOUNT')">坑逝消杯到水佝频靓</button><br/>
<button onclick="send('WATER_QUALITY')">坑逝消杯到水质频靓</button><br/>
<button onclick="send('TUBE_NET')">坑逝消杯到网管频靓</button><br/>
<button onclick="send('SENSO')">坑逝消杯到设备频靓</button><br/>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>

<script type="text/javascript">
    var websocket = null;

    //判断当剝浝览器是坦支挝WebSocket
    if('WebSocket' in window){
        // 建立连接
        websocket = new WebSocket("ws://localhost:9400/operation_indepandent/websocket");
    }
    else{
        alert('Not support websocket')
    }

    //连接坑生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接戝功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消杯的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监坬窗坣关闭事件，当窗坣关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗坣，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消杯显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    // 订阅频靓
    function subscribe(channelName) {
        websocket.send(JSON.stringify({subscribe:channelName}));
    }
    // 订阅频靓
    function subscribes(channelName) {
        websocket.send(JSON.stringify({subscribe:channelName}));
    }

    // 退订频靓
    function unsubscribe(channelName) {
        websocket.send(JSON.stringify({unsubscribe:channelName}));
    }

    //坑逝消杯
    function send(channelName){
        let message = document.getElementById('text').value;
        if (message == '') {
            alert('请输入消杯 !');
        } else {
            websocket.send(JSON.stringify({channel:channelName, message:message}));
        }
    }
</script>
</html>